<template>
  <div>
    <div class="demo-inner-divider">基础对话框</div>
    <div class="row" >
      <e-button @click="confirm">基础对话框</e-button>
    </div>
    <div class="demo-inner-divider">反馈类对话框</div>
    <div class="row" >
      <e-button @click="instance('info')">通知</e-button>
      <e-button @click="instance('success')">成功</e-button>
      <e-button @click="instance('warning')">警告</e-button>
      <e-button @click="instance('error')">错误</e-button>
      <e-button @click="instance('confirm')">确定</e-button>
    </div>
    <div class="demo-inner-divider">自定义</div>
    <div class="row" >
      <e-button @click="selfClick">自定义title</e-button>
      <e-button @click="selfClickFooterHide">隐藏底部</e-button>
      <e-button @click="modal10=true">自定义icon</e-button>
    </div>
    <!-- 普通弹框 -->
    <div class="row" >
      <e-modal
        v-model="visible"
        title="Common Modal dialog box title"
        @on-cancel="onOk"
        @on-ok="onCancel"
      >
        <p>第1行内容</p>
        <p>第2行内容</p>
        <p>第3行内容</p>
      </e-modal>
    </div>
    <!-- 自定义弹框 -->
    <div class="row" >
      <e-modal
        v-model="selfVisible"
        @on-cancel="onOk"
        @on-ok="onCancel"
        :mask="false"
        loading
      >
        <template #close>
          <e-icon :type="'close'"></e-icon>
        </template>
        <template #header>
          <div>我是自定义title（使用header插槽）</div>
        </template>
        <!-- <template #footer>
          <div>我是自定义footer（使用footer插槽）</div>
        </template> -->
      </e-modal>
    </div>
    <div class="row" >
      <e-modal
        v-model="selfFooterHideVisible"
        title="Title"
        :closable="true"
        :footer-hide="true"
      >
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
      </e-modal>
    </div>
    <e-modal title="Title" v-model="modal10">
      <template #header>
        <e-icon type="info-circle" :size="16" style="margin-right: 10px"></e-icon>
        <span>自定义图标</span>
      </template>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium enim ratione perferendis placeat voluptatem, velit dolorum id, in aperiam dolor distinctio, numquam quisquam odio. Corporis ducimus odit rem voluptas consectetur!</p>
    </e-modal>
    <div class="demo-inner-divider">异步关闭</div>
    <div class="row" >
      <e-button @click="async">异步关闭对话框</e-button>
    </div>

    <!-- 点击遮罩关闭 -->
    <div class="demo-inner-divider"></div>
    <e-button @click="modal1 = true">点击mask关闭</e-button>
    <e-modal
      title="Title"
      v-model="modal1"
      :closable="true">
      <p>Content of dialog</p>
      <p>Content of dialog</p>
      <p>Content of dialog</p>
    </e-modal>
    <e-button @click="modal2 = true">禁用mask关闭</e-button>
    <e-modal
      title="Title"
      v-model="modal2"
      :mask-closable="false">
      <p>Content of dialog</p>
      <p>Content of dialog</p>
      <p>Content of dialog</p>
    </e-modal>

    <div class="demo-inner-divider">自定义组件位置</div>

    <e-button @click="modal3=true">距离顶部20px</e-button>
    <e-modal title="Title" v-model="modal3" :styles="{top:'20px'}">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium enim ratione perferendis placeat voluptatem, velit dolorum id, in aperiam dolor distinctio, numquam quisquam odio. Corporis ducimus odit rem voluptas consectetur!</p>
    </e-modal>

    <e-button @click="modal9=true">默认位置</e-button>
    <e-modal title="Title" v-model="modal9">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium enim ratione perferendis placeat voluptatem, velit dolorum id, in aperiam dolor distinctio, numquam quisquam odio. Corporis ducimus odit rem voluptas consectetur!</p>
    </e-modal>

    <div class="demo-inner-divider">通过class-name设置垂直居中</div>
    <e-button @click="modal4=true">垂直居中</e-button>
    <e-modal title="标题" v-model="modal4" class-name="vertical-center-modal">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nam quae quidem quas ipsa repellat velit facere incidunt? Voluptate veritatis at iste totam ex asperiores placeat dolor fugiat aperiam. Inventore.</p>
    </e-modal>

    <div class="demo-inner-divider">modal对话框全屏</div>
    <e-button @click="modal5=true" >点击全屏modal</e-button>
    <e-modal fullscreen v-model="modal5" footer-hide>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. In ab deserunt quis consequuntur incidunt, laborum tenetur, cumque eaque quas pariatur a animi. Accusantium, accusamus eum? Error molestias recusandae harum magni!</p>
    </e-modal>
    <div class="demo-inner-divider">移动拖拽</div>
    <e-button @click="modal6=true">移动拖拽</e-button>
    <e-modal v-model="modal6" draggable title="可拖拽modal">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam animi nisi sunt est obcaecati qui reprehenderit, esse a, rem deleniti magnam soluta hic beatae neque error accusamus exercitationem, harum provident!</p>
    </e-modal>
    <div class="demo-inner-divider">sticky</div>
    <e-button @click="modal7=true">移动拖拽sticky</e-button>
    <e-modal v-model="modal7" :stickyDistance="10" sticky draggable scrollable :mask="false" title="可拖拽 stickymodal">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam animi nisi sunt est obcaecati qui reprehenderit, esse a, rem deleniti magnam soluta hic beatae neque error accusamus exercitationem, harum provident!</p>
    </e-modal>

    <div class="demo-inner-divider">modal自定义内容</div>
    <e-button @click="handleRender">自定义渲染内容</e-button>
    <modal-md  class="markdown-body"></modal-md>
  </div>
</template>
<script>
import modalMd from '../../docs/modal.md';

export default {
  components: { modalMd },
  data() {
    return {
      value: '',
      visible: false,
      selfVisible: false,
      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false,
      modal5: false,
      modal6: false,
      modal7: false,
      modal8: false,
      modal9: false,
      modal10: false,
      selfFooterHideVisible: false
    }
  },
  methods: {
    instance(type) {
      const content = '<p>这是一项操作时必须了解的重要信息</p>'
      switch (type) {
      case 'info':
        this.$Modal.info({
          title: '提示',
          content: content,
          okText: '关闭',
          onOk: () => {
            // this.$Message.info('Clicked ok')
          },
        })
        break
      case 'success':
        this.$Modal.success({
          title: '成功',
          content: content,
          okText: '关闭',
        })
        break
      case 'warning':
        this.$Modal.warning({
          title: '警示',
          content: content,
          okText: '关闭',
        })
        break
      case 'error':
        this.$Modal.error({
          title: '错误',
          content: content,
          okText: '关闭',
        })
        break
      case 'confirm':
        this.$Modal.confirm({
          title: '确定',
          content: content,
          okText: '关闭',
        })
        break

      }

    },
    confirm() {
      this.$Modal.confirm({
        title: '是否关闭此实例？',
        content: '<p>这是一项操作时必须了解的重要信息</p>',
        okText: '关闭',
        onOk: () => {
          // this.$Message.info('Clicked ok')
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel')
        },
      })
    },
    async() {
      this.$Modal.confirm({
        title: '是否关闭此实例？',
        content: '<p>点击关闭，2秒后自动关闭对话框</p>',
        loading: true,
        okText: '关闭',
        onOk: () => {
          setTimeout(() => {
            this.$Modal.remove()
            // this.$Message.info('Asynchronously close the dialog box')
          }, 2000)
        },
      })
    },
    handleRender() {
      this.$Modal.confirm({
        render: (h) => {
          return h('input', {
            modelValue: this.value,
            autofocus: true,
            placeholder: '这是自定义元素提示',
            'onUpdate:modelValue': (val) => (this.value = val),
          })
        },
      })
    },
    selfClick () {
      this.selfVisible = true
    },
    selfClickFooterHide() {
      this.selfFooterHideVisible = true;
    },
    onOk () {
      // TODO on confirm
    },
    onCancel () {
      // TODO when cancel
    }
  },
}
</script>
<style scoped>
  .row {
    margin: 20px 0;
  }
  .haloe-btn {
    margin-right: 10px;
  }

  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>
  <style>

  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vertical-center-modal .haloe-modal{
        top: 0;
    }
  </style>
